<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <p id="num"></p>
    <img src="./img/1.png" width=100 height=100 alt="1" id="one">
    <img src="./img/2.png" width=100 height=100 alt="1" id="two">
    <img src="./img/3.png" width=100 height=100 alt="1" id="three">
    <br>
    <button onclick="zhuan()">开始</button>
    <button onclick="stop()">停止</button>
    <script>
       var num = document.getElementById('num');
        var aa = 0;
        
        var i = 0;
        function zhuan(){
            i = setInterval("change()",100)
            aa=0
        }
 
        function change(){
            var first = Math.floor(Math.random()*2+1);
            var second = Math.floor(Math.random()*2+1);
            var third  = Math.floor(Math.random()*2+1);
            document.getElementById('one').src = './img/'+first+'.png';
            document.getElementById('two').src = './img/'+second+'.png';
            document.getElementById('three').src = './img/'+third+'.png';
            aa = first+second+third 
        }
        
 
        function stop(){
            clearInterval(i);
            num.innerHTML='结果:'+aa;
        }
        
    </script>
 
</body>
</html>
